<template>
	<view>
		<view style="background-color: #1573FF;height: 150rpx;display: flex;flex-direction: column;">
			<text style="color: #fff;font-size: 38rpx;margin: 20rpx 0 0 20rpx;">{{ approveStatusStr|filterNull }}</text>
			<text style="color: #FFC000;font-size: 24rpx;margin: 10rpx 0 0 20rpx;"
				>{{approveDesc|filterNull}}</text>

		</view>

		<view class="item">
			<u-icon name="order" color="#1573FF" label="车辆信息" label-color="#333333"
				:customStyle="{'display': 'block', 'line-height': '80rpx','padding-left': '20rpx',}"></u-icon>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line">
				<text class="text-name">车架号:</text>
				<text class="text-value">{{dataBean.shiftEntity.vinNo|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">车牌号:</text>
				<text class="text-value">{{dataBean.shiftEntity.carNo|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">品牌/车系/车型:</text>
				<text class="text-value">{{dataBean.shiftEntity.brandModel|filterNull}}</text>
			</view>

		</view>

		<view class="item">
			<u-icon name="order" color="#1573FF" label="车辆移库信息" label-color="#333333"
				:customStyle="{'display': 'block', 'line-height': '80rpx','padding-left': '20rpx',}"></u-icon>

			<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>

			<view class="text-line">
				<text class="text-name">移库原因:</text>
				<text class="text-value">{{dataBean.shiftEntity.transferReasonStr|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">当前仓库:</text>
				<text class="text-value">{{dataBean.shiftEntity.depotName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">当前车辆归属:</text>
				<text class="text-value">{{dataBean.shiftEntity.deptName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">移库时间:</text>
				<text class="text-value">{{dataBean.shiftEntity.transferTime|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">移入仓库:</text>
				<text class="text-value">{{dataBean.shiftEntity.purposeDepotName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">移入车辆归属:</text>
				<text class="text-value">{{dataBean.shiftEntity.purposeDeptName|filterNull}}</text>
			</view>

			<view class="text-line">
				<text class="text-name">移库备注:</text>
				<text class="text-value">{{dataBean.shiftEntity.remarks|filterNull}}</text>
			</view>

		</view>

		<view class="item"
			v-if="dataBean!=null && dataBean.shiftEntity!=null && dataBean.shiftEntity.bpmChartDtoList!=null &&dataBean.shiftEntity.bpmChartDtoList.length>0">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="clock-fill" color="#1573FF" size="16" label="审核流程" label-color="#333333"
					style="line-height: 80rpx;">
				</u-icon>

				<!-- <text style="line-height: 80rpx; color: #E93131;">{{dataBean.carDisposal.repairStatusShow|filterNull}}</text> -->
			</view>


			<u-line color="#efefef" :customStyle="{'margin-bottom': '20rpx','display': 'block',}"></u-line>



			<view v-for="(item, index) in dataBean.shiftEntity.bpmChartDtoList" :key="index">
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;">


						<image :src="avator" mode="scaleToFill" style="width: 78rpx;height: 78rpx;margin: 0 20rpx;">
						</image>

						<view style="display: flex;flex-direction: column;flex: 1;margin-right: 20rpx;">
							<view style="display: flex;justify-content: space-between;">
								<text style="font-size: 30rpx;color: #333;">{{item.userName|filterNull}}</text>
								<text style="font-size: 28rpx;color: #a7a7a7;">{{item.nodeName|filterNull}}</text>
								<text
									style="font-size: 30rpx;color: #1573FF;">{{item.approveNodeStatus|filterNull}}</text>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 6rpx;">
								<text style="font-size: 24rpx;color: #a7a7a7;">{{item.approveTime|filterNull}}</text>
								<text style="font-size: 24rpx;color: #a7a7a7;">耗时:{{item.elapsedTime|filterNull}}</text>
							</view>
						</view>

					</view>

					<view style="display: flex;">
						<view style="width: 2rpx;height: auto;background-color: #EFEFEF;margin:0 59rpx;" :style="{
							'opacity':index==dataBean.shiftEntity.bpmChartDtoList.length-1?'0':'1'
						}">
						</view>

						<text
							style="color: #a7a7a7;font-size: 24rpx;flex: 1;padding: 10rpx 20rpx 30rpx 0;">审核意见:{{item.approveContent|filterNull}}</text>
					</view>
				</view>
			</view>
		</view>

		<view style="height: 100rpx;"></view>

		<view class="bottom"
			v-if="'true'==isShift && dataBean!=null && dataBean.buttonList!=null &&dataBean.buttonList.length>0">
			<text class="bottom-btn" @click="commit(bitem)" v-for="(bitem, bindex) in dataBean.buttonList"
				:key="bindex">{{bitem.btnName}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
        avator: this.baseImgUrl() + 'uni_longrent/icon_circle_def.png',
				orderId: '',
				approveDesc: '',
        approveStatusStr: '',
				processKey: '',
				approveId: '',
				bizType: 0,
				isShift: false,
        pageType: '',

				dataBean: {
					shiftEntity: {

					}
				},
			}
		},
		methods: {
			commit(bitem) {
				//602 通过
				//603 驳回
				//604 拒绝
				//305 撤回

				//1拒绝  2驳回   3列表直接通过    4编辑后通过  5撤回   6删除   7审核页面直接通过
				switch (bitem.btnKey) {
					case '602':
						uni.redirectTo({
							url: '/pagesB/dispatchcar/exam-dispatch?type=7&carShiftId=' + this.orderId +
								'&processKey=' + this.processKey + '&approveId=' + this.approveId +
								'&instanceId=' +
								this.dataBean.shiftEntity.instanceId + '&nodeId=' + this.dataBean.shiftEntity
								.currentNodeId
						})

						break;
					case '603':
						uni.redirectTo({
							url: '/pagesB/dispatchcar/exam-dispatch?type=2&carShiftId=' + this.orderId +
								'&processKey=' + this.processKey + '&approveId=' + this.approveId +
								'&instanceId=' +
								this.dataBean.shiftEntity.instanceId + '&nodeId=' + this.dataBean.shiftEntity
								.currentNodeId
						})

						break;
					case '604':
						uni.redirectTo({
							url: '/pagesB/dispatchcar/exam-dispatch?type=1&carShiftId=' + this.orderId +
								'&processKey=' + this.processKey + '&approveId=' + this.approveId +
								'&instanceId=' +
								this.dataBean.shiftEntity.instanceId + '&nodeId=' + this.dataBean.shiftEntity
								.currentNodeId
						})

						break;
					case '305':
						uni.redirectTo({
							url: '/pagesB/dispatchcar/exam-dispatch?type=5&carShiftId=' + this.orderId +
								'&processKey=' + this.processKey + '&approveId=' + this.approveId +
								'&instanceId=' +
								this.dataBean.shiftEntity.instanceId + '&nodeId=' + this.dataBean.shiftEntity
								.currentNodeId
						})

						break;
				}
			}
		},
		onLoad(op) {
			this.orderId = op.orderId
			this.approveDesc = op.approveDesc
			this.processKey = op.processKey
			this.approveId = op.approveId
			this.bizType = op.bizType
			this.isShift = op.isShift
			this.pageType = op.pageType
			this.approveStatusStr = 'null'!==op.approveStatusStr?op.approveStatusStr:null

		},
		onShow() {
			this.$u.api.orderAuditData({
				orderId: this.orderId,
				isShift: this.isShift,
				bizType: this.bizType
			}).then(res => {
				this.dataBean = res;

        if('detail'==this.pageType){
          this.dataBean.shiftEntity.bpmChartDtoList = this.dataBean.bizData && this.dataBean.bizData.bpmChartDtoList
        }
			})
		}

	}
</script>

<style lang="scss" scoped>
	.bottom {
		position: fixed;
		left: 0;
		right: 0;
		height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 10rpx;

		.bottom-btn {
			flex: 1;
			margin: 0 10rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: $blue15;
			color: white;
			text-align: center;
			font-size: 30rpx;
		}
	}
</style>
